<template>
    <div class="page_root">
        <div class="body">
            <div class="top-search">
                <div>
                    <a-row :gutter="24">
                        <a-col :span="5">
                            <a-form-item label="区域选择" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
                                <a-select
                                    allow-clear
                                    v-model:value="state.regionName"
                                    placeholder="请选择区域"
                                    :options="state.regionList"
                                    :field-names="{ label: 'areaName', value: 'id' }"
                                    maxTagTextLength="10"
                                    :filterOption="
                                        (input, option) => {
                                            return option.areaName.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                        }
                                    "
                                    @focus="getRegionList"
                                />
                            </a-form-item>
                        </a-col>
                    </a-row>
                </div>
            </div>
            <div class="content">
                <div class="top-title">
                    <div class="title-item">
                        <div class="title-font">当前熟料库存</div>
                        <div class="content-font">789</div>
                    </div>
                    <div class="title-item">
                        <div class="title-font">预测熟料库存</div>
                        <div class="content-font">789</div>
                    </div>
                    <div class="title-item">
                        <div class="title-font">当前熟料库容比</div>
                        <div class="content-font">987</div>
                    </div>
                    <div class="title-item">
                        <div class="title-font">当前总开窑率</div>
                        <div class="content-font">6677</div>
                    </div>
                </div>
                <div class="top-chart-top">
                    <div class="content-title">
                        <div class="tip">
                            <div class="tip-msg">总库存</div>
                        </div>
                    </div>
                    <div class="chart" ref="topContauner"> </div>
                </div>
                <div class="top-chart">
                    <div class="left">
                        <div class="content-title">
                            <div class="tip">
                                <div class="tip-msg">黑龙江省熟料库存与熟料产量</div>
                            </div>
                        </div>
                        <div ref="chartContainer" class="chart"></div>
                    </div>

                    <div class="right">
                        <div class="content-title">
                            <div class="tip">
                                <div class="tip-msg">吉林省熟料库存与熟料产量</div>
                            </div>
                        </div>
                        <div class="chart" ref="rightContauner"> </div>
                    </div>
                </div>
                <div class="top-chart">
                    <div class="left">
                        <div class="content-title">
                            <div class="tip">
                                <div class="tip-msg">辽宁省熟料库存与熟料产量</div>
                            </div>
                        </div>
                        <div ref="bottomLeft" class="chart"></div>
                    </div>
                    <div class="right">
                        <div class="content-title">
                            <div class="tip">
                                <div class="tip-msg">蒙东地区熟料库存与熟料产量</div>
                            </div>
                        </div>
                        <div ref="bottomRight" class="chart"></div>
                    </div>
                </div>
                <div class="default-table">
                    <a-table
                        :scroll="{ x: 'max-content' }"
                        :columns="columns"
                        :data-source="state.dataSource"
                        bordered
                        :loading="state.spinng"
                    >
                        <template #bodyCell="{ column, record, text, index }">
                            <template v-if="column.dataIndex === 'count'">
                                {{ index + 1 }}
                            </template>
                            <template v-if="column.dataIndex === 'opration'">
                                <a-space>
                                    <a-button type="link" @click="handleEdit(record)">编辑</a-button>
                                    <a-popconfirm @confirm="handleDelete(record)" title="确定删除吗？">
                                        <a-button type="link">删除</a-button>
                                    </a-popconfirm>
                                </a-space>
                            </template>
                        </template>
                    </a-table>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
    import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'

    // 定制化逻辑
    import { nextTick } from 'vue'
    import * as echarts from 'echarts'

    const state = reactive({
        dataSource: [],
        regionName: undefined,
        regionList: []
    })
    const columns = [
        {
            title: '序号',
            align: 'center',
            dataIndex: 'count'
        },
        {
            title: '日期',
            align: 'center',
            dataIndex: 'date'
        },
        {
            title: '黑龙江省',
            align: 'center',
            dataIndex: 'date',
            children: [
                {
                    title: '产量(万吨)',
                    align: 'center',
                    dataIndex: 'date'
                },
                {
                    title: '库存(万吨)',
                    align: 'center',
                    dataIndex: 'date'
                }
            ]
        },
        {
            title: '吉林省',
            align: 'center',
            dataIndex: 'date',
            children: [
                {
                    title: '产量(万吨)',
                    align: 'center',
                    dataIndex: 'date'
                },
                {
                    title: '库存(万吨)',
                    align: 'center',
                    dataIndex: 'date'
                }
            ]
        },
        {
            title: '辽宁省',
            align: 'center',
            dataIndex: 'date',
            children: [
                {
                    title: '产量(万吨)',
                    align: 'center',
                    dataIndex: 'date'
                },
                {
                    title: '库存(万吨)',
                    align: 'center',
                    dataIndex: 'date'
                }
            ]
        },
        {
            title: '蒙东地区',
            align: 'center',
            dataIndex: 'date',
            children: [
                {
                    title: '产量(万吨)',
                    align: 'center',
                    dataIndex: 'date'
                },
                {
                    title: '库存(万吨)',
                    align: 'center',
                    dataIndex: 'date'
                }
            ]
        }
    ]
    const topContauner = ref(null)
    const chartContainer = ref(null)
    const rightContauner = ref(null)
    const bottomLeft = ref(null)
    const bottomRight = ref(null)
    let myChart0 = null
    let myChart = null
    let myChart2 = null
    let myChart3 = null
    let myChart4 = null
    // 预设的 8 种颜色
    const colors = ['#5470C6', '#91CC75', '#FAC858', '#EE6666', '#73C0DE', '#3BA272', '#FC8452', '#9A60B4']
    // 动态数据
    const topData = [
        {
            name: '北京',
            data: [
                { time: '2024-01', value: 120 },
                { time: '2024-02', value: 200 },
                { time: '2024-03', value: 150 },
                { time: '2024-04', value: 80 }
                // 其他月份数据
            ]
        },
        {
            name: '上海',
            data: [
                { time: '2024-01', value: 90 },
                { time: '2024-02', value: 150 },
                { time: '2024-03', value: 130 },
                { time: '2024-04', value: 100 }
                // 其他月份数据
            ]
        }
        // 可以添加更多系列数据
    ]
    const oneData = [
        {
            name: '北京',
            data: [
                { time: '2024-01', value: 120 },
                { time: '2024-02', value: 200 },
                { time: '2024-03', value: 150 },
                { time: '2024-04', value: 80 }
                // 其他月份数据
            ]
        },
        {
            name: '上海',
            data: [
                { time: '2024-01', value: 90 },
                { time: '2024-02', value: 150 },
                { time: '2024-03', value: 130 },
                { time: '2024-04', value: 100 }
                // 其他月份数据
            ]
        }
        // 可以添加更多系列数据
    ]
    const twoData = [
        {
            name: '山东',
            data: [
                { time: '2024-01', value: 160 },
                { time: '2024-02', value: 230 },
                { time: '2024-03', value: 110 },
                { time: '2024-04', value: 180 }
                // 其他月份数据
            ]
        },
        {
            name: '山西',
            data: [
                { time: '2024-01', value: 40 },
                { time: '2024-02', value: 250 },
                { time: '2024-03', value: 30 },
                { time: '2024-04', value: 110 }
                // 其他月份数据
            ]
        }
        // 可以添加更多系列数据
    ]
    const threeData = [
        {
            name: '河北',
            data: [
                { time: '2024-01', value: 1600 },
                { time: '2024-02', value: 2300 },
                { time: '2024-03', value: 1010 },
                { time: '2024-04', value: 1800 }
                // 其他月份数据
            ]
        },
        {
            name: '河南',
            data: [
                { time: '2024-01', value: 400 },
                { time: '2024-02', value: 2050 },
                { time: '2024-03', value: 300 },
                { time: '2024-04', value: 1010 }
                // 其他月份数据
            ]
        }
        // 可以添加更多系列数据
    ]
    const fourData = [
        {
            name: '广东',
            data: [
                { time: '2024-01', value: 16 },
                { time: '2024-02', value: 23 },
                { time: '2024-03', value: 10 },
                { time: '2024-04', value: 18 }
                // 其他月份数据
            ]
        },
        {
            name: '广西',
            data: [
                { time: '2024-01', value: 4 },
                { time: '2024-02', value: 20 },
                { time: '2024-03', value: 3 },
                { time: '2024-04', value: 10 }
                // 其他月份数据
            ]
        }
        // 可以添加更多系列数据
    ]
    // 函数：根据动态数据生成 x 轴和 series 数据
    const getOptionFromData = data => {
        const xAxisData = data[0].data.map(item => item.time)

        const series = data.map((item, index) => ({
            name: item.name,
            type: 'line',
            data: item.data.map(d => d.value),
            itemStyle: {
                color: colors[index % colors.length] // 循环为每个系列分配颜色
            },
            smooth: true // 平滑曲线
        }))

        return {
            xAxis: {
                type: 'category',
                data: xAxisData, // x 轴数据
                axisLine: { onZero: true },
                splitLine: { show: false }
            },
            yAxis: {
                name: '市占率(%)',
                nameTextStyle: {
                    color: '#aaa',
                    nameLocation: 'start'
                },
                type: 'value'
            },
            series,
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                icon: 'rect',
                data: series
            }
        }
    }

    // 渲染图表函数
    const renderChart = () => {
        const option0 = getOptionFromData(topData)
        const option = getOptionFromData(oneData)
        const option2 = getOptionFromData(twoData)
        const option3 = getOptionFromData(threeData)
        const option4 = getOptionFromData(fourData)
        option0 && myChart0.setOption(option0)
        option && myChart.setOption(option)
        option2 && myChart2.setOption(option2)
        option3 && myChart3.setOption(option3)
        option4 && myChart4.setOption(option4)
    }

    onMounted(async () => {
        await nextTick()

        // 初始化 ECharts 实例
        myChart0 = echarts.init(topContauner.value)
        myChart = echarts.init(chartContainer.value)
        myChart2 = echarts.init(rightContauner.value)
        myChart3 = echarts.init(bottomLeft.value)
        myChart4 = echarts.init(bottomRight.value)

        // 渲染图表
        renderChart()

        // 监听窗口尺寸变化
        window.addEventListener('resize', handleResize)
    })

    const handleResize = () => {
        if (myChart0) {
            myChart0.resize()
        }
        if (myChart) {
            myChart.resize()
        }
        if (myChart2) {
            myChart2.resize()
        }
        if (myChart3) {
            myChart3.resize()
        }
        if (myChart4) {
            myChart4.resize()
        }
    }

    // 组件卸载时移除 resize 监听器
    onBeforeUnmount(() => {
        window.removeEventListener('resize', handleResize)
    })
</script>

<style scoped lang="less">
    #main {
        width: 100%;
        height: 100%;
    }
    .body {
        padding: 0 24px;
    }
    .page_root {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    .top-search {
        height: 68px;
        background-color: #fff;
        padding: 16px 24px;
        border-radius: 4px;
        margin-bottom: 16px;
    }
    .content {
        background-color: #fff;
        border-radius: 4px;
        padding: 24px;
        padding-top: 24px;
        height: calc(100vh - 220px);
        overflow: auto;
        padding-bottom: 8px;
    }
    .top-chart {
        display: flex;
        gap: 20px;
        margin-bottom: 20px;
    }
    .top-chart-top {
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
        margin-bottom: 20px;
    }
    .left {
        width: 50%;
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
        height: 300px;
    }
    .right {
        flex: 1;
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
        height: 300px;
    }
    /*表格按钮通用样式*/
    .default-table :deep(.@{ant-prefix}-table-thead) > tr > th {
        background: #f5f5f5;
        font-size: 14px;
        font-family: arial, helvetica, 'microsoft yahei';
        font-weight: 600;
        color: #262626;
        padding: 8px 16px;
    }
    .default-table :deep(.@{ant-prefix}-table-tbody) tr > td {
        font-size: 14px;
        font-family: arial, helvetica, 'microsoft yahei';
        font-weight: 400;
        color: #595959;
        border-bottom: 1px solid #d9d9d9;
        padding: 6px 16px;
        word-break: break-all;
    }
    /*表格按钮通用样式*/
    .content-title {
        padding: 0 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .tip {
        height: 40px;
        display: flex;
        align-items: center;
    }
    .tip-msg {
        height: 20px;
        font-size: 16px;
        line-height: 20px;
        padding-left: 8px;
        font-weight: 600;
    }
    /*表格顶部的标题*/
    .chart {
        height: 300px;
        width: 100%;
    }
    .top-title {
        display: flex;
        gap: 10px;
        margin-bottom: 20px;
    }
    .title-item {
        display: flex;
        width: 300px;
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
        height: 80px;
        padding: 16px;
        align-items: center;
        gap: 20px;
    }
    .title-font {
        font-size: 24px;
    }
    .content-font {
        font-size: 24px;
        font-weight: 800;
    }
</style>
